<!-- Register.vue -->
<template>
  <div class="register-container">
    <!-- 动态粒子背景 -->
    <vue-particles
      class="particles"
      color="#FFFFFF"
      :particleOpacity="0.8"
      :particlesNumber="120"
      shapeType="circle"
      :particleSize="5"
      linesColor="#FFFFFF"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.6"
      :linesDistance="120"
      :moveSpeed="4"
      :hoverEffect="true"
      hoverMode="bubble"
      :clickEffect="true"
      clickMode="repulse"
    ></vue-particles>

    <!-- 背景光效 -->
    <div class="light-effect light-1"></div>
    <div class="light-effect light-2"></div>

    <div class="register-box" :class="{'box-float': isHovering}">
      <div class="register-header">
        <img 
          src="../assets/images/logo.png" 
          alt="Logo" 
          class="logo animate__animated animate__rubberBand" 
          :style="{'animation-delay': '0.5s'}"
        >
        <h2 class="animate__animated animate__fadeInDown" :style="{'animation-delay': '0.7s'}">
          注册矿小言账号
          <span class="title-highlight"></span>
        </h2>
        <p class="subtitle animate__animated animate__fadeIn" :style="{'animation-delay': '0.9s'}">
          开启智能问答之旅
        </p>
      </div>

      <el-form
        ref="registerFormRef"
        :model="registerForm"
        :rules="registerRules"
        class="register-form animate__animated animate__fadeInUp"
        :style="{'animation-delay': '1.1s'}"
        @keyup.enter.native="handleRegister"
        @mouseenter="isHovering = true"
        @mouseleave="isHovering = false"
      >
        <el-form-item prop="username">
          <el-input
            v-model="registerForm.username"
            placeholder="请输入用户名"
            prefix-icon="User"
            @focus="inputFocus('username')"
            @blur="inputBlur"
            class="input-field"
          />
        </el-form-item>

        <el-form-item prop="email">
          <el-input
            v-model="registerForm.email"
            placeholder="请输入邮箱"
            prefix-icon="Message"
            @focus="inputFocus('email')"
            @blur="inputBlur"
            class="input-field"
          />
        </el-form-item>

        <el-form-item prop="password">
          <el-input
            v-model="registerForm.password"
            type="password"
            placeholder="请输入密码"
            prefix-icon="Lock"
            show-password
            @focus="inputFocus('password')"
            @blur="inputBlur"
            class="input-field"
          />
        </el-form-item>

        <el-form-item prop="confirmPassword">
          <el-input
            v-model="registerForm.confirmPassword"
            type="password"
            placeholder="请确认密码"
            prefix-icon="Lock"
            show-password
            @focus="inputFocus('confirmPassword')"
            @blur="inputBlur"
            class="input-field"
          />
        </el-form-item>

        <el-form-item prop="verificationCode">
          <div class="code-input">
            <el-input
              v-model="registerForm.verificationCode"
              placeholder="请输入验证码"
              prefix-icon="Key"
              @focus="inputFocus('verificationCode')"
              @blur="inputBlur"
              class="input-field"
            />
            <el-button 
              type="primary" 
              class="code-btn" 
              :disabled="codeDisabled"
              @click="sendVerificationCode"
            >
              {{ codeButtonText }}
            </el-button>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            class="register-btn animate__animated"
            :class="{'animate__pulse': !loading, 'animate__heartBeat': buttonBeat}"
            :loading="loading"
            @click="handleRegister"
            @mouseenter="startButtonBeat"
          >
            立即注册
            <span class="btn-ripple" v-if="showRipple"></span>
          </el-button>
        </el-form-item>
      </el-form>

      <div class="register-footer animate__animated animate__fadeInUp" :style="{'animation-delay': '1.3s'}">
        <p>已有账号？<el-link type="primary" @click="goToLogin">立即登录</el-link></p>
      </div>
    </div>

    <!-- 浮动装饰元素 -->
    <div class="floating-elements">
      <div 
        v-for="(shape, index) in floatingShapes" 
        :key="index"
        :class="['shape', `shape-${index}`, shape.type]"
        :style="shape.style"
      ></div>
    </div>

    <!-- 注册成功特效 -->
    <div v-if="showSuccessEffect" class="success-effect">
      <div class="confetti" v-for="(confetti, index) in confettis" :key="index" :style="confetti.style"></div>
    </div>
  </div>
</template>

<script>
import 'animate.css';
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

export default {
  name: 'Register',
  setup() {
    const router = useRouter();
    const isHovering = ref(false);
    const buttonBeat = ref(false);
    const showRipple = ref(false);
    const showSuccessEffect = ref(false);
    const confettis = reactive([]);
    const codeDisabled = ref(false);
    const codeButtonText = ref('获取验证码');
    const registerFormRef = ref(null)
    let countdown = 60;
    const registerForm = reactive({
      username: '',
      email: '',
      password: '',
      confirmPassword: '',
      verificationCode: ''
    });

    const floatingShapes = [
      { type: 'circle', style: { top: '15%', left: '5%', width: '120px', height: '120px', animationDelay: '0s' } },
      { type: 'circle', style: { top: '70%', left: '80%', width: '180px', height: '180px', animationDelay: '2s' } },
      { type: 'triangle', style: { top: '30%', left: '85%', borderWidth: '60px', animationDelay: '1s' } },
      { type: 'square', style: { top: '75%', left: '10%', width: '100px', height: '100px', animationDelay: '1.5s' } }
    ];

    const startButtonBeat = () => {
      buttonBeat.value = true;
      setTimeout(() => {
        buttonBeat.value = false;
      }, 1000);
    };

    const showButtonRipple = () => {
      showRipple.value = true;
      setTimeout(() => {
        showRipple.value = false;
      }, 600);
    };

    const createConfetti = () => {
      showSuccessEffect.value = true;
      confettis.length = 0;
      
      for (let i = 0; i < 100; i++) {
        confettis.push({
          style: {
            backgroundColor: `hsl(${Math.random() * 360}, 100%, 50%)`,
            left: `${Math.random() * 100}%`,
            top: `${Math.random() * 100}%`,
            width: `${Math.random() * 10 + 5}px`,
            height: `${Math.random() * 10 + 5}px`,
            animationDelay: `${Math.random() * 0.5}s`,
            animationDuration: `${Math.random() * 3 + 2}s`
          }
        });
      }
      
      setTimeout(() => {
        showSuccessEffect.value = false;
      }, 3000);
    };
    const sendLoading = ref(false);
    const sendVerificationCode = async () => {
      // 验证邮箱格式
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(registerForm.email)) {
        ElMessage.error('请输入有效的邮箱地址');
        return;
      }
      
      codeDisabled.value = true;
      const timer = setInterval(() => {
        countdown--;
        codeButtonText.value = `${countdown}秒后重新获取`;
        if (countdown <= 0) {
          clearInterval(timer);
          codeDisabled.value = false;
          codeButtonText.value = '获取验证码';
          countdown = 60;
        }
      }, 1000);
      
      // 这里应该是发送验证码的API调用
      ElMessage.success('验证码已发送至您的邮箱');
    };

    const goToLogin = () => {
      router.push('/login');
    };

    // 自动按钮动画
    onMounted(() => {
      setInterval(() => {
        showButtonRipple();
      }, 3000);
    });

    return {
      isHovering,
      buttonBeat,
      showRipple,
      showSuccessEffect,
      confettis,
      floatingShapes,
      codeDisabled,
      codeButtonText,
      registerFormRef,
      registerForm,
      startButtonBeat,
      showButtonRipple,
      createConfetti,
      sendVerificationCode,
      goToLogin
    };
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length < 6) {
        callback(new Error('密码长度不能少于6位'));
      } else {
        if (this.registerForm.confirmPassword !== '') {
          this.$refs.registerFormRef.validateField('confirmPassword');
        }
        callback();
      }
    };
    
    const validateConfirmPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    
    return {
      registerRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, validator: validatePassword, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, validator: validateConfirmPassword, trigger: 'blur' }
        ],
        verificationCode: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { len: 6, message: '验证码长度为6位', trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    handleRegister() {
      this.$refs.registerFormRef.validate(valid => {
        if (valid) {
          this.loading = true;
          // 这里应该是注册API调用
          setTimeout(() => {
            this.createConfetti();
            this.$message.success({
              message: '注册成功',
              duration: 2000,
              showClose: true,
              customClass: 'success-message',
              offset: 80
            });
            setTimeout(() => {
              this.$router.push('/login');
            }, 2000);
            this.loading = false;
          }, 1500);
        }
      });
    },
    inputFocus(field) {
      // 输入框聚焦效果
    },
    inputBlur() {
      // 输入框失去焦点效果
    }
  }
}
</script>

<style scoped>
.register-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(-45deg, #3f51b1, #5a55ae, #7b5fac, #8f6aae, #a86aa4, #cc6b8e, #f18271, #f3a469, #f7c978);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  overflow: hidden;
  font-family: 'Noto Sans SC', sans-serif;
}

@keyframes gradientBG {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.register-box {
  position: relative;
  width: 450px;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.93);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  z-index: 2;
  backdrop-filter: blur(8px);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
}

.box-float {
  transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(-10px);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), 
              0 0 0 2px rgba(255, 255, 255, 0.1) inset;
}

.register-header {
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.register-header .logo {
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
  transition: all 0.5s ease;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

.register-header h2 {
  color: #333;
  font-size: 28px;
  font-weight: 700;
  margin: 20px 0 10px;
  letter-spacing: 1.5px;
  position: relative;
  display: inline-block;
}

.title-highlight {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  z-index: -1;
  border-radius: 4px;
  opacity: 0.5;
  animation: highlightPulse 3s infinite;
}

.register-form {
  margin-top: 30px;
}

.code-input {
  display: flex;
  gap: 10px;
}

.code-btn {
  width: 140px;
  height: 48px;
  font-size: 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, #a18cd1, #fbc2eb);
  border: none;
  transition: all 0.3s ease;
}

.code-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(161, 140, 209, 0.4);
}

.code-btn:disabled {
  background: #cccccc;
  transform: none;
  box-shadow: none;
}

.register-btn {
  width: 100%;
  height: 50px;
  margin-top: 20px;
  font-size: 18px;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border: none;
  border-radius: 50px;
  color: white;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(0, 242, 254, 0.3);
  z-index: 1;
}

.register-footer {
  text-align: center;
  margin-top: 25px;
  font-size: 15px;
}

.register-footer p {
  color: #666;
}

.login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #00f2fe, #4facfe);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.login-btn:hover::before {
  opacity: 1;
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.login-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  font-size: 15px;
}

.remember-me {
  transition: all 0.3s ease;
}

.remember-me:hover {
  transform: scale(1.05);
}

.links {
  display: flex;
  gap: 20px;
}

.link-item {
  transition: all 0.3s ease;
  position: relative;
  padding: 5px 0;
}

.link-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  transition: width 0.3s ease;
}

.link-item:hover::after {
  width: 100%;
}

/* 浮动装饰元素 */
.floating-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.shape {
  position: absolute;
  opacity: 0.15;
  animation: float 15s infinite ease-in-out;
}

.circle {
  border-radius: 50%;
  background: linear-gradient(45deg, #4facfe, #00f2fe);
}

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 120px solid #ff5e62;
}

.square {
  background: #a18cd1;
  transform: rotate(45deg);
}

.hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #fbc2eb;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(20px, -30px) rotate(10deg);
  }
  50% {
    transform: translate(-20px, 20px) rotate(-10deg);
  }
  75% {
    transform: translate(30px, 10px) rotate(5deg);
  }
}

/* 输入框样式 */
:deep(.el-input__wrapper) {
  transition: all 0.5s ease;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  border-radius: 12px;
  padding: 0 15px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.8);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px #4facfe inset !important;
  transform: translateY(-3px);
  background-color: white;
}

:deep(.el-input__inner) {
  font-size: 15px;
}

/* 消息提示样式 */
:deep(.success-message) {
  background: linear-gradient(90deg, #56ab2f, #a8e063);
  color: white;
  font-size: 16px;
  padding: 18px 25px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(86, 171, 47, 0.4);
  border: none;
}

:deep(.error-message) {
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
  color: white;
  font-size: 16px;
  padding: 18px 25px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(255, 65, 108, 0.4);
  border: none;
}

/* 登录成功特效 */
.success-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0;
  animation: confettiFall 3s ease-in forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-box {
    width: 90%;
    padding: 30px;
  }
  
  .login-header .logo {
    width: 80px;
    height: 80px;
  }
  
  .login-header h2 {
    font-size: 24px;
  }
}
</style>